<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/taglib/jstl.jsp" %>
<%-- 
<div>
	<form id="frmPageNavi">
		<input type="hidden" name="sysCode" value="${sysBase.sysCode}" />
		
		<c:if test="${sysBase.sysChmod >= 5}">
			<input type="button" id="regNewBtn" value="등록" />
		</c:if>
	</form>
</div>

<div style="width:100%; height:5px;"></div>

<div class="div-resultList">
	<jsp:include page="./_listConts.jsp" />
</div>

<script type="text/javascript" src="/resources/js/views/template/system/organogram/_list.js"></script>
 --%>

<script type="text/javascript">
!function ($) {
	"use strict"; // jshint ;_;

	/* SWITCH PUBLIC CLASS DEFINITION
	* ============================== */
	var Switch = function (element, options) {
		this.init(element, options)
	}

	Switch.prototype = {
		constructor: Switch
		, init: function (element, options) {
			this.$element = $(element)
			this.options = $.extend({}, $.fn.switchbtn.defaults, options)
			this.addChildren()
			this.$element.on('click.switch.data-api', $.proxy(this.toggle, this))
		}
		, toggle: function (e) {
			var $el = this.$element, disabled = 'disabled', active = 'active'

			if ($el.attr(disabled) || $el.hasClass(disabled)) return

			$el.toggleClass(active)
			this.$checkbox && this.$checkbox.attr('checked', $el.hasClass(active))
		}
		, addChildren: function () {
			var $el = this.$element, options = this.options
			$el.empty()

			this.$checkbox = options.checkbox && $('<input type="checkbox"/>').attr('name', options.checkbox).attr('checked', $el.hasClass('active')).appendTo($el)

			$('<span/>').addClass('switch-track').appendTo($el)
			$('<span/>').addClass('switch-thumb').attr('data-on', options.on).attr('data-off', options.off).appendTo($el)
		}
	}

	/* SWITCH PLUGIN DEFINITION
	* ======================== */
	// IE8- incorrectly treat the 'switch' in '$.fn.switch' as a reserved word so we'll use '$.fn.switchbtn' instead
	$.fn.switchbtn = function (option) {
		return this.each(function () {
			var $this = $(this)
			, data = $this.data('switch')
			, options = typeof option == 'object' && option
			data || $this.data('switch', (data = new Switch(this, options)))
			option == 'toggle' && data.toggle()
		})
	}

	$.fn.switchbtn.defaults = {
		on: 'ON'
		, off: 'OFF'
		, checkbox: false
	}

	$.fn.switchbtn.Constructor = Switch

	/* SWITCH DATA-API
	* =============== */
	$(function () {
		$('[data-toggle="switch"]').each(function () {
			var $switch = $(this)
			$switch.switchbtn($switch.data())
		})
	})
}(window.jQuery);


$(document).ready(function(){
	var oldContainer = null;
	
	$("ol.nested_with_switch").sortable({
		group: 'nested',
		afterMove: function (placeholder, container) {
			if(oldContainer != container){
				if(oldContainer) {
					oldContainer.el.removeClass("active");
				}
				container.el.addClass("active");
				oldContainer = container;
			}
		},
		onDrop: function (item, container, _super) {
			container.el.removeClass("active");
			_super(item);
		}
	});
	
	$("ol.simple_with_switch").sortable({
		group: 'nested',
		afterMove: function (placeholder, container) {
			if(oldContainer != container){
				if(oldContainer) {
					oldContainer.el.removeClass("active");
				}
				container.el.addClass("active");
				oldContainer = container;
			}
		},
		onDrop: function (item, container, _super) {
			container.el.removeClass("active");
			_super(item);
		}
	});

	$(".switch-container").on("click", ".switch", function  (e) {
		var method = $(this).hasClass("active") ? "enable" : "disable";
		$(e.delegateTarget).next().sortable(method);
	});
});
</script>

<div style="float:left; width:300px;">
	<div class="switch-container">
		<div class='switch active' data-off='OFF' data-on='ON' data-toggle='switch'></div>
	</div>

	<ol class='nested_with_switch vertical'>
		<li>First<ol></ol></li>
		<li>Second<ol></ol></li>
		<li>Third<ol></ol></li>
	</ol>
</div>

<div style="float:left; width:10px; height:100%;"></div>

<div style="float:left; width:200px;">
	<div class="switch-container">
		<div class='switch active' data-off='OFF' data-on='ON' data-toggle='switch'></div>
	</div>

	<ol class='simple_with_switch vertical'>
		<li>First</li>
		<li>Second</li>
		<li>Third</li>
	</ol>
</div>

<div style="float:left; width:200px;">
	<form id="frmRegOrg"></form>
</div>
